<template>
  <div v-show="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" size="mini" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="文章标题" prop="title" required>
            <el-input v-model="dataForm.title" :maxlength="1024" placeholder="标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文章类型" prop="type" required>
            <el-select v-model="dataForm.type" placeholder="选择文章类型">
              <el-option v-for="(name,key) in ARTICLE_TYPES" :key="name" :label="name" :value="key"
                         allow-create></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="一级目录" prop="category">
            <el-input :maxlength="50" v-model="dataForm.category" placeholder="一级目录"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="二级分类" prop="subCategory">
            <el-input :maxlength="50" v-model="dataForm.subCategory" placeholder="二级目录"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="指向外链" prop="targetLink">
        <el-input v-model="dataForm.targetLink" placeholder="指向外链"></el-input>
      </el-form-item>
      <el-form-item label="摘要" prop="summary">
        <el-input v-model="dataForm.summary" placeholder="摘要" type="textarea" rows="3" maxlength="512"
                  show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <tags-editor v-model="dataForm.tags"></tags-editor>
      </el-form-item>
      <el-row>
        <el-col :span="20">
          <el-form-item label="封面图" prop="image">
            <el-input :maxlength="50" v-model="dataForm.image" placeholder="封面图"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleImage"
            v-hasPermi="['system:oss:upload']"
          >上传图片
          </el-button>
        </el-col>
      </el-row>
      <tinymce-editor ref="editor" v-model="dataForm.content"></tinymce-editor>
    </el-form>
    <div class="margin-top text-right">
      <el-button @click="$emit('hide')">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </div>
    <!-- 添加或修改OSS对象存储对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="文件名">
          <imageUpload v-model="form.file" :limit="1" @fileList="getImageUrl"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {getArticle, addArticle, updateArticle} from "@/api/wx/article";
  export default {
    name: 'article-add-or-update',
    components: {
      TinymceEditor: () => import("@/components/tinymce-editor"),
      tagsEditor: () => import("@/components/tags-editor")
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dataForm: {
          id: undefined,
          type: '1',
          title: "",
          content: "",
          category: "",
          subCategory: "",
          summary: "",
          tags: "",
          openCount: 0,
          targetLink: "http://localhost:9090/#/pages/common/article/index?articleId=${articleId}",
          ossId: "",
          image: ""
        },
        dataRule: {
          type: [
            {required: true, message: "文章类型不能为空", trigger: "blur"}
          ],
          title: [
            {required: true, message: "标题不能为空", trigger: "blur"}
          ],
          category: [
            {required: true, message: "分类不能为空", trigger: "blur"}
          ]
        },
        // 按钮loading
        buttonLoading: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          file: [
            { required: true, message: "文件不能为空", trigger: "blur" }
          ]
        }
      };
    },
    computed: mapState({
      ARTICLE_TYPES: state => state.article.ARTICLE_TYPES
    }),
    methods: {
      init(id) {
        this.dataForm.id = id || undefined;
        this.dataForm.content = "";
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
          if (id > 0) {
            getArticle(id).then(response => {
              this.dataForm = response.data;
              this.dataForm.type = response.data.type + "";
            });
          }
        });
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            if (this.dataForm.id != null && this.dataForm.id > 0) {
              updateArticle(this.dataForm).then(response => {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.$emit("refreshDataList");
                    this.$emit('hide')
                  }
                });
              }).finally(() => {
              });
            } else {
              addArticle(this.dataForm).then(response => {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.$emit("refreshDataList");
                    this.$emit('hide')
                  }
                });
              }).finally(() => {
              });
            }
          }
        });
      },
      imgUploadSuccess(response, file, fileList) {
        console.log(response);
        if (response.code == 200) {
          this.dataForm.image = response.data;
          console.log("this.article", this.article);
        } else {
          this.$message.warning(response.msg);
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          file: undefined,
        };
        this.resetForm("form");
      },
      /** 图片按钮操作 */
      handleImage() {
        this.reset();
        this.open = true;
        this.title = "上传图片";
      },
      /** 提交按钮 */
      submitForm() {
        this.open = false;
      },
      getImageUrl(fileList){
        if(fileList.length == 1){
          this.dataForm.ossId = fileList[0].ossId;
          this.dataForm.image = fileList[0].url;
        }else{
          this.dataForm.ossId = "";
          this.dataForm.image = "";
        }
      }
    }
  };
</script>
